<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>我是</p>
        <my-book :book="datail"></my-book>
        <p>我是阿萨德了n</p>

    </div>
</body>
<script src="./vue.global.js"></script>
<script>


    // 单向数据流： (父 --> 子)
    // 父组件的数据流 传递得子组件， 父组件的数据更新后， 子组件的数据也会跟着更新 ，但是，反过来不行
    //
    // 进一步解释：
    // 1.在子组件内部， 属性是自己读的
    //  2.修改子组件属性， 会有警告， 并且不能修改成功
    // 如果属性是引用类型，那么在子组件里修改引用类型的键时，没有警告（但是，一定要管住自己的手和脑，不要修改）。


    // 子组件
    const MyBook = {
        props:["book"],
        template:`
        
            <div>
                <p>书名:{{book.name}}</p>
                <p>作者:{{book.author}}</p>
                <p>价格:{{book.price}}</p>
                <input type="button" value="修改" @click="change">
                </div>
        `,
        methods:{
            change(){
                this.book = {
                    //  扩展运算符
                ...this.book,
                price:this.book.price
                }
            }
        }



        }







    const {createApp} =Vue;
    let app = createApp({
        data(){
            return{
                datail:{
                    name:'年后',
                    author:'ajhd',
                    price:'213.2',
                }
            }
        },
        components:{
            MyBook
        }
    
    })
    app.mount("#app")
</script>
</html>